<template>
  <section
    class="be-slide-box"
    :style="{
      width: styleStatus ? boxWidth : 'auto',
      height: styleStatus ? boxHeight : 'auto'
    }"
  >
    <ul
      :style="{
        width: ulWidth
      }"
      v-drag.yLock="drag"
    >
      <slot></slot>
    </ul>
  </section>
</template>

<script>
import '../style.scss'
export default {
  name: 'deSlide',
  props: {
    width: {
      type: [Number, String],
      default: null
    },
    height: {
      type: [Number, String],
      default: null
    },
    ratio: {
      type: Number,
      default: .5
    },
  },
  data() {
    return {
      boxWidth: 0,
      styleStatus: false
    }
  },
  computed: {
    boxHeight() {
      let height = 0
      if(this.height){
        height = typeof this.height === 'number' ? `${this.height}px` : this.height
      }else{
        height = `${parseInt(this.boxWidth) * this.ratio}px`
      }
      return height
    },
    ulWidth() {
      return `${parseInt(this.boxWidth) * this.$children.length}px`
    }
  },
  methods: {
    drag() {}
  },
  mounted() {
    setTimeout(() => {
      this.boxWidth = (typeof this.width === 'number' ? `${this.width}px` : this.width) || `${this.$el.offsetWidth}px`
      this.styleStatus = true
    }, 0)
  }
}
</script>
